<template>
  <div>
    <div class="grid grid-cols-3 md:gap-4 !md:m-4">
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_instance_cpm"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_instance_sla"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_instance_resp_time"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
    </div>
    <div class="grid grid-cols-4 md:gap-4 !md:m-4">
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="instance_jvm_cpu"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
      <MultiLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="instance_jvm_memory_heap"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
      <MultiLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="instance_jvm_gc_time"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
      <StackedColumnChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="instance_jvm_gc_count"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
    </div>
    <div class="grid grid-cols-4 md:gap-4 !md:m-4">
      <MultiLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="instance_jvm_thread_count"
        :service-name="serviceName"
        :service-instance-name="instanceName"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

import SingleLineChart from '../../../common/SingleLineChart.vue';
import MultiLineChart from '../../../common/MultiLineChart.vue';
import StackedColumnChart from '../../../common/StackedColumnChart.vue';

export default defineComponent({
  components: {
    SingleLineChart,
    MultiLineChart,
    StackedColumnChart,
  },
  props: {
    start: String,
    end: String,
    step: String,
    serviceName: String,
    instanceName: String,
  },
  setup(props) {
    const pageName = ref('instance');

    const start = ref();
    const end = ref();
    const step = ref();
    const serviceName = ref();
    const instanceName = ref();
    const duration = ref();

    const instanceConditions = ref([
      'service_instance_cpm',
      'service_instance_sla',
      'service_instance_resp_time',
    ]);

    watch(
      () => [props.start, props.end, props.step, props.serviceName, props.instanceName],
      (val) => {
        start.value = val[0];
        end.value = val[1];
        step.value = val[2];
        serviceName.value = val[3];
        instanceName.value = val[4];
      },
      { immediate: true, deep: true }
    );

    return {
      props,
      pageName,
      duration,
      instanceConditions,
    };
  },
});
</script>
